<template>
  <from>
    <label>Username:</label>
    <input type="text" id="username" placeholder="输入用户名" name="username" v-model="loginForm.username">
    <br><br>

    <label>Password:</label>
    <input type="password" id="password" placeholder="输入密码" name="password" v-model="loginForm.password">
    <br><br>
    <input type="submit" value="登录" @click="validate">

    <br><br>
    <h1>加减计算器</h1>
    <button @click="decrement">-</button>
    <input type="number" v-model="counter">
    <button @click="increment">+</button>
  </from>
</template>

<script>
  export default {
    data(){
      return {
        loginForm:{
          username:'',
          password:''
        },
        counter: 0
      }
    },
    methods:{
      validate(){
        if(this.loginForm.username == 'zhangsan' && this.loginForm.password == '123'){
          alert('登陆成功');
        }else {
          alert('用户名或密码错误');
        }
      },
      increment() {
        this.counter++
      },
      decrement() {
        if (this.counter > 1) {
          this.counter--
        }
      }
    }
  }
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
